import {Card, Col, message, Row} from 'antd';
import React, {useEffect, useState} from 'react';
import {PageContainer} from '@ant-design/pro-layout';
import {queryFutuStockNet} from './service';
import {empty, NumberMul} from "@/utils/function";
import {queryUse} from "@/utils/service";
import "@/components/Echarts/EchartsOne";
import EchartsOne from "@/components/Echarts/EchartsOne";

const getStockNet:(data: any[], name:string) => any = (data, name) =>{
  // const [series, setSeries] = useState<any>(null);
  // useEffect(() => {
    let dataLines: any = {
      timeList: [],
      usdEquityList: [],
      coinIndexList: [],
      equityList: [],
    }
    //红色的是usd_equity 要除以初始  灰色的是con_index 除以初始  蓝色的是equity
    for (let i in data) {
      dataLines.timeList.push(data[i].insertDate.split(' ')[0]);
      dataLines.usdEquityList.push(
        NumberMul(data[i].usdNet,1,4)
      );
      dataLines.coinIndexList.push(
        NumberMul(data[i].indexNet,1,4)
      );
      dataLines.equityList.push(
        NumberMul(data[i].net,1,4)
      );
    }
    let series = {
      title: {
        text: name
      },
      tooltip: {
        trigger: 'axis',
      },
      // toolbox: {
      //   feature: {
      //     saveAsImage: {}
      //   }
      // },
      legend: {
        // data: ['收益']
      },
      xAxis: {
        type: 'category',
        axisTick: {
          show: false,
        },
        axisLabel: {
          showMaxLabel: true,
          // normal
          color: '#333333',
          showMinLabel: true,
          fontSize: 13,
          padding: [10, 4, 10, 4],
        },

        // boundaryGap: ['20%', '20%'],
        axisLine: {
          lineStyle: {
            color: 'rgba(155,155,155,0.7)',
            width: 1,
            type: 'dashed',
          },
        },
        position: 'bottom',
        // splitNumber:8,
        data: dataLines.timeList,
      },
      dataZoom: [
        {
          show: true,
          xAxisIndex: 0,
          type: 'inside',
          start: 0,
          end: 100,
          // minValueSpan: 10,
        },
      ],
      yAxis:
        {
          max(value:any) {
            return value.max > 1.05 ? (value.max + 0.05).toFixed(1) : 1.05;
          },
          min(value:any) {
            return value.min < 0.95 ? (value.min - 0.05).toFixed(1) : 0.95;
          },
          type: 'value',
          position: 'right',
        },
      series: [
        {
          name: '股本位净值',
          data: dataLines.equityList,
          type: 'line',
          showSymbol: false,
          itemStyle:{
            color: '#357ad2',
          },
          lineStyle: {
            width:2,
          },
          endLabel: {
            show: true, position: 'right', formatter: (params:any) => {
              if (dataLines.usdEquityList.length - 1 === params.dataIndex) {
                // @ts-ignore
                return  params.value||'';
              } else {
                return '';
              }
            },
          },
        },
        {
          name: '股票净值',
          data: dataLines.coinIndexList,
          type: 'line',
          showSymbol: false,
          itemStyle:{
            color: '#989da2',
          },
          lineStyle: {
            width: 2,
          },
          endLabel: {
            show: true, position: 'right', formatter: (params:any) => {
              if (dataLines.usdEquityList.length - 1 === params.dataIndex) {
                // @ts-ignore
                return  params.value||'';
              } else {
                return '';
              }
            },
          },
        },

        {
          name: '   美元本位净值',
          data: dataLines.usdEquityList,
          type: 'line',
          showSymbol: false,
          itemStyle:{
            color: '#d93838',
          },
          lineStyle: {
            width: 2,
          },
          endLabel: {
            show: true, position: 'right', formatter: (params:any) => {
              if (dataLines.usdEquityList.length - 1 === params.dataIndex) {
                // @ts-ignore
                return  params.value||'';
              } else {
                return '';
              }
            },
          },
        },
      ]
    }
    // setSeries(series);
  // }, [])
  return <Col span={12}> <EchartsOne chartId={name} series={series} height={555}/></Col>
}

const OptionStockNet: React.FC = () => {

  // @ts-ignore
  const [reDoc, setReDoc] = useState<any>(null);
//投资金额 指数价格  买入数量 买入金额 卖出数量 卖出金额
  const openLinesSum = async () => {
    const msg = await queryFutuStockNet();
    // debugger
    let dataAll = queryUse(msg);
    if (!empty(dataAll)) {
      let dataMap = {};
      dataAll.map((a: any)=>{
        if(!dataMap[a.stockName]){
          dataMap[a.stockName] = [];
          dataMap[a.stockName].push(a);
        }else{
          dataMap[a.stockName].push(a);
        }
      })
      let reDoc = [];
      for (let b in dataMap) {
        reDoc.push(getStockNet(dataMap[b],b))
      }
     setReDoc(reDoc);

      // setLastDay(lastDay);
      // handleTradeModal({symbol: record.symbol,})
      // handleDetailModalVisible(true);
    } else {
      message.error("暂无数据")
    }

  }
  useEffect(() => {
    openLinesSum().then(r => {});
  }, [])
  return (
    <PageContainer>
      <Card>
        <Row id={"gggbbb"}>
          {reDoc}
        </Row>

      </Card>
    </PageContainer>
  );
};

export default OptionStockNet;
